<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>企业号服务框架</title>
</head>
<body>
<div class="header">
    欢迎访问企业号服务开发框架，服务框架锁提供的一些基础接口采用rest风格，此页面为简单的接口测试页
</div>
<div class="main">
    <div class="controller">
        <p>控制区</p>
        <div>
            <div class="form">
                <input id="url" type="text" placeholder="访问地址:">
                <textarea id="data" placeholder="额外提交的json数据:"></textarea>
            </div>
            <div class="btn">
                <span id="get">get</span>
                <span id="post">post</span>
                <span id="put">put</span>
                <span id="delete">delete</span>
            </div>
        </div>
        <div class="list">
            <ul>
                <?php foreach($apiList as $v){?>
                <li>
                    <span class="title"><?php echo $v[0]; ?></span>
                    <span class="url"><?php echo $domain.$v[1]; ?></span>
                </li>
                <?php }?>
            </ul>
        </div>
    </div>
    <div class="result">
        <p>结果展示区</p>
        <div class="show">

        </div>
    </div>
</div>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .header{
        font-size: 12px;
        width: 100%;
        height: 15px;
        line-height: 15px;
        text-align: center;
        border-bottom: dashed 1px;
    }
    .main{
        width: 100%;
        min-height: 500px;
    }
    .controller{
        width: 49%;
        height: auto;
        border-right: dashed 1px;
        float:left;
    }
    p{
        width: 100%;
        text-align: center;
    }
    .controller input{
        width: 80%;
        height: 25px;
        line-height: 25px;
        padding: 1px;
        margin-top: 10px;
    }
    .controller textarea{
        width: 80%;
        height: 50px;
        padding: 2px;
        margin:10px 0 10px 0;
        border-radius: 6px;
    }
    .result{
        width: 49%;
        height: auto;
        float: right;
    }
    .show{
        width: 100%;
        margin-top: 15px;
    }
    input,textarea{
        transition:all 0.30s ease-in-out;
        -webkit-transition: all 0.30s ease-in-out;
        -moz-transition: all 0.30s ease-in-out;

        border:#35a5e5 1px solid;
        border-radius:3px;
        outline:none;
    }
    input:focus,textarea:focus{
        box-shadow:0 0 5px rgba(81, 203, 238, 1);
        -webkit-box-shadow:0 0 5px rgba(81, 203, 238, 1);
        -moz-box-shadow:0 0 5px rgba(81, 203, 238, 1);
    }
    a{
        text-decoration:none;
        background:rgba(81, 203, 238, 1);
        color:white;padding: 6px 25px 6px 25px;
        font:12px '微软雅黑';
        border-radius:3px;

        -webkit-transition:all linear 0.30s;
        -moz-transition:all linear 0.30s;
        transition:all linear 0.30s;
    }
    .btn span{
        /*display: block;*/
        cursor: pointer;
        text-decoration: none;
        background: rgba(81, 203, 238, 1);
        color: white;
        padding: 6px 25px 6px 25px;
        font: 12px '微软雅黑';
        border-radius: 3px;
        -webkit-transition: all linear 0.30s;
        -moz-transition: all linear 0.30s;
        transition: all linear 0.30s;
    }
    .list{
        width: 100%;
        margin-top: 10px;;
    }
    .list li{
        cursor: pointer;
    }
    .btn span:hover,.list li:hover{background:rgba(39, 154, 187, 1);}
</style>
<script type="text/javascript" src="application/public/static/common/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        var Url=$('#url');
        var Data=$('#data');
        var url=Url.val();
        var data=Data.val();
        $('.list li').click(function(){
            url=$(this).find('.url').text();
            Url.val(url);
        });
        Data.change(function(){
            data=Data.val();
            if(data != ''){
                data=JSON.parse(data);
            }
        })
        function printData(data)
        {
            if(typeof(data) == "object" && Object.prototype.toString.call(data).toLowerCase() == "[object object]" && !data.length)
            {
                data=JSON.stringify(data);
            }
            $('.show').html(data);
        }
        function toAjax(mothed)
        {
            if(url == '') {
                return 0;
            }
            $.ajax(
                    {
                        url:url,
                        type:mothed,
                        data:data,
                        success:function(data){printData(data)}
                    }
            )
        }
        $('#get').click(function(){
            toAjax('get');
        });
        $('#post').click(function(){
            toAjax('post');
        });
        $('#put').click(function(){
            toAjax('put');
        });
        $('#delete').click(function(){
            toAjax('delete');
        });
    })
</script>
</body>
</html>